
<template>
  <div class="tree-node" v-for="(node, index) in data" :key="node.label">
    <div class="node-label">
     <button class="toggle-button" @click="btnClick(index)" v-if="node.children && node.children.length>0 "> {{isOpenAll[index] ?  '▼' : '►' }} </button>
     <input type="checkbox" v-model="node.checked" @change="changeState(node,index)" />
      <label :for="node.label" >{{node.label}}</label>
    </div>
    <Tree v-if="isOpenAll[index]" :data="node.children ? node.children:[]" :showCheckbox="showCheckbox"/>
  </div>
</template>

<script setup>
import { ref, provide, inject } from 'vue'
const props = defineProps({
  data: {
    type: Array,
    required: true
  },
  showCheckbox: {
    type: Boolean,
    default: true
  },
  transition: {
    type: Boolean,
    default: true
  }
  //   parent: {
  //     type: Object,
  //     default: null
  //   }
})
  //是否展开
let isOpenAll = ref(new Array(props.data.length).fill(false))
// console.log(isOpenAll.value);
const btnClick = (index)=>{
 isOpenAll.value[index] = !isOpenAll.value[index];
}
provide('parentNode',props.data)

let parentNode = inject('parentNode',null)

//复选框按钮发生变化
const changeState=(node)=>{

//父节点选中影响字节点
  const updateChildCheck = (currentNode,checked)=>{

    if (currentNode.children&&currentNode.children.length>0){

      currentNode.children.forEach((n)=>{
        n.checked = checked
        updateChildCheck(n,n.checked)
      })

    }
  }

  updateChildCheck(node,node.checked)

//子节点选中，影响父节点


  // 2. 更新父节点（向上递归）
  const updateParentCheck = (currentNode) => {
    console.log(parentNode,'555');

    const parent = findParent(parentNode, currentNode); // 需实现查找父节点逻辑
    if (!parent) return;

    const allChildrenChecked = parent.children.every(child => child.checked);
    parent.checked = allChildrenChecked; // 自动触发响应式更新
    updateParentCheck(parent); // 继续向上更新
  };

  // 辅助函数：查找父节点
  const findParent = (tree, targetNode) => {

    for (const node of tree) {
      if (node.children?.includes(targetNode)) return node;
      const found = findParent(node.children || [], targetNode);
      if (found) return found;
    }
    return null;
  };
  // const updateParentCheck = (parentNode,currentNode)=>{
  //   console.log(parentNode,666);
  //   if(!currentNode) return;
  //   if(parentNode){
  //     //先找到当前节点
  //     for (const parentNodeElement of parentNode) {
  //       if(parentNodeElement.children.includes(currentNode)){
  //           let isChecked = parentNodeElement.children.every((n)=>n.checked)
  //         parentNodeElement.checked = isChecked
  //         updateChildCheck(parentNode,parentNodeElement)
  //       }
  //
  //     }
  //   }
  //
  //
  //
  // }

updateParentCheck(parentNode,node)
}


// 过渡动画相关的方法
function beforeEnter(el) {
  el.style.maxHeight = '0'
  el.style.opacity = '0'
  el.style.overflow = 'hidden'
}

function enter(el) {
  el.style.transition = 'max-height 0.3s ease, opacity 0.3s ease'
  el.style.maxHeight = el.scrollHeight + 'px'
  el.style.opacity = '1'
}

function afterEnter(el) {
  el.style.maxHeight = 'none'
}

function beforeLeave(el) {
  el.style.maxHeight = el.scrollHeight + 'px'
  el.style.opacity = '1'
  el.style.overflow = 'hidden'
}

function leave(el) {
  el.style.transition = 'max-height 0.3s ease, opacity 0.3s ease'
  el.style.maxHeight = '0'
  el.style.opacity = '0'
}

function afterLeave(el) {
  el.style.maxHeight = 'none'
}
</script>

<style scoped>
.tree-node {
  margin-left: 20px;
  font-family: Arial, sans-serif;
}
.node-label {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 14px;
}
.toggle-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  color: black;
}
</style>
